.track {
  width: 100%;
  height: 6px;
  background: #0f141f;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin: 14px auto 0;
  position: relative;
  overflow: hidden;
}

.bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.55), rgba(34, 211, 238, 0.55));
  transform-origin: left center;
  animation: loadOsc 3.66s ease-in-out infinite alternate;
}

@keyframes loadOsc {
  0% {
    transform: scaleX(0.5);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0.5);
  }
}

.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.55), rgba(124, 92, 255, 0));
  animation: drift 16s ease-in-out infinite;
}

@keyframes drift {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-36px) translateX(18px);
    opacity: 0.8;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-20px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 0.8;
  }
}

/* === Cosmos Canvas === */
.cosmos {
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(124, 92, 255, 0.25));
}

.fx {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
}

section > *:not(.section-accent):not(.fx) {
  position: relative;
  z-index: 2;
}

.section-accent {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: accentFloat 16s ease-in-out infinite alternate;
}

@keyframes accentFloat {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 1;
  }
}

.accent-1 {
  background: radial-gradient(900px 700px at 18% -12%, rgba(124, 92, 255, 0.22), transparent 70%),
    radial-gradient(900px 700px at 105% -4%, rgba(34, 211, 238, 0.18), transparent 70%);
}
.accent-2 {
  background: radial-gradient(880px 660px at 12% -14%, rgba(124, 92, 255, 0.24), transparent 70%),
    radial-gradient(880px 660px at 98% -6%, rgba(34, 211, 238, 0.16), transparent 70%);
}
.accent-3 {
  background: radial-gradient(920px 720px at 24% -18%, rgba(124, 92, 255, 0.2), transparent 70%),
    radial-gradient(920px 720px at 110% -2%, rgba(34, 211, 238, 0.2), transparent 70%);
}
.accent-4 {
  background: radial-gradient(820px 640px at 8% -10%, rgba(124, 92, 255, 0.22), transparent 70%),
    radial-gradient(820px 640px at 102% -12%, rgba(34, 211, 238, 0.18), transparent 70%);
}
.accent-5 {
  background: radial-gradient(950px 740px at 16% -8%, rgba(124, 92, 255, 0.2), transparent 70%),
    radial-gradient(950px 740px at 108% -6%, rgba(34, 211, 238, 0.2), transparent 70%);
}

.arrow {
  width: 96px;
  height: 2px;
  position: relative;
}
.arrow::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: linear-gradient(90deg, #8b5cf6, #38bdf8);
}
.arrow::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 10px solid #38bdf8;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
@media (max-width: 820px) {
  .steps-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .arrow {
    display: none;
  }
  .arrow::after {
    content: '';
    position: relative;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    border: 0px;
  }
}
